<template>
  <v-card :loading="loading" class="mx-auto my-12" max-width="300" color="">
    <v-img ref="img" @click="$refs.uploadImg.click()" :src="user.avatar" height="200px" class="rb" dark>
      <v-btn icon dark  v-if="user.id===loginUser.id">
        <v-icon>
          mdi-camera
        </v-icon>
      </v-btn>
    </v-img>
    <v-row class="mt-4 ml-1">
      <h2 class="mt-3 ml-3">{{user.nickname}}</h2>
    </v-row>

    <v-row justify="center" align="center">
      <v-btn color="primary" class="my-2 ">
        <v-icon>
          mdi-backburger
        </v-icon>
      </v-btn>

      <v-btn color="primary" @click="uploadImg" class="my-2 mx-4">
        <v-icon>
          mdi-cloud-upload
        </v-icon>
      </v-btn>
      <v-btn color="primary" class="my-2">
        <v-icon>
          mdi-home
        </v-icon>
      </v-btn>
    </v-row>

    <v-list class="">
      <v-list-item>
        <v-list-item-icon>
          <v-icon>mdi-phone</v-icon>
        </v-list-item-icon>

        <v-list-item-content>
          <v-list-item-title>{{ user.phone }}</v-list-item-title>
          <v-list-item-subtitle>{{ format(user.gender) }}</v-list-item-subtitle>
        </v-list-item-content>
      </v-list-item>
      <v-list-item>
        <v-list-item-icon>
          <v-icon>mdi-map-marker</v-icon>
        </v-list-item-icon>

        <v-list-item-content>
          <v-list-item-title>{{ user.address }}</v-list-item-title>
        </v-list-item-content>
      </v-list-item>
      <v-list-item>
        <v-list-item-icon>
          <v-icon>mdi-account</v-icon>
        </v-list-item-icon>

        <v-list-item-content>
          <v-list-item-title>账户安全</v-list-item-title>
        </v-list-item-content>
      </v-list-item>
      <v-list-item>
        <v-list-item-icon>
          <v-icon>mdi-email</v-icon>
        </v-list-item-icon>

        <v-list-item-content>
          <v-list-item-title>意见反馈</v-list-item-title>
        </v-list-item-content>
      </v-list-item>
      <v-list-item>
        <v-list-item-icon>
          <v-icon>mdi-information</v-icon>
        </v-list-item-icon>

        <v-list-item-content>
          <v-list-item-title>关于社区</v-list-item-title>
        </v-list-item-content>
      </v-list-item>
    </v-list>

    <input type="file" id="uploadImg" ref="uploadImg" @change="changeImg" style="visibility: hidden;" />
  </v-card>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState({
      loginStatus: (state) => state.loginStatus,
      loginUser: (state) => state.loginUser,
      user:(state)=>state.user
    })
  },
  data: () => ({
    loading: false,
    selection: 1,
    imgSrc: '',
    file: ''
  }),

  created() {
    this.imgSrc = this.user.avatar
  },
  methods: {
    reserve() {
      this.loading = true

      setTimeout(() => (this.loading = false), 2000)
    },
    format(type) {
      if (type === 1) return '男'
      if (type === 2) return '女'
      if (type === 0) return '保密'
    },
    uploadImg() {
      if (this.file != '') {
        let formData = new FormData()
        formData.append('file', this.file)

        let headers = {
          'Content-Type': 'multipart/form-data'
        }

        this.axios.post('/user/upload', formData, headers).then((res) => {
          console.log(res.data.data)
          this.user.avatar = res.data.data
          let newUser = this.user
          newUser.avatar = res.data.data
          this.$store.commit('editUserInfo', newUser)

          this.axios({
            method: 'post',
            url: '/user/update',
            data: newUser
          }).then((res) => {
              console.log(res)
            this.imgSrc = res.data.data.avatar
            this.$layer.msg('头像上传成功！')
          })
        })
      }
    },
    changeImg() {
      const refs = this.$refs
      const elinput = refs.uploadImg
      const elImg = refs.img
      const reader = new FileReader()
      reader.onload = (e) => {
        elImg.src = e.target.result
      }
      if (elinput.files && elinput.files[0]) {
        this.file = elinput.files[0]
        reader.readAsDataURL(elinput.files[0])
      }
    }
  }
}
</script>

<style lang="scss">
.nn {
  font-size: 30px;
  margin-top: 100px;
}
</style>
